import React from 'react';
import Slider from 'react-slick'; // 轮播库
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import './styles.css';

const Carousel: React.FC = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
  };

  return (
    <div className="carousel">
      <Slider {...settings}>
        <div><img src="https://img.zcool.cn/community/0165b158fa21f0a8012160f7c5663f.jpg@1280w_1l_2o_100sh.jpg" alt="Banner 1" /></div>
        <div><img src="https://th.bing.com/th/id/R.18bd718947a6e5a1f4bde3a6e547f2f7?rik=rSzqvViEPM0OPA&riu=http%3a%2f%2fwww.timenetwork.com.cn%2fuploadfile%2f2023%2f0219%2f20230219110513744.jpg&ehk=NnjvHxAf%2bLiRQ4lLnS4afkjKsKqJODnjQOQ2mYe%2bKt8%3d&risl=&pid=ImgRaw&r=0" alt="Banner 2" /></div>
        <div><img src="https://th.bing.com/th/id/R.5272d960ceb451752cd82abfc0efcd9c?rik=IWwunszrdOSJ4A&riu=http%3a%2f%2fwww.myunmei.com%2fupload%2fueditor%2fimage%2f20230525%2f1685023969405025730.jpg&ehk=mgyxtdQfz1LhzxnwmN75BsVzNuuuqR%2baEc0R62BPca8%3d&risl=&pid=ImgRaw&r=0" alt="Banner 3" /></div>
      </Slider>
    </div>
  );
};

export default Carousel;
